<template>
  <div class="addSupplier">
    <div class="title" v-if="isshow==1">添加供应商</div>
    <div class="title" v-if="isshow==2">编辑供应商</div>
    <div class="formdiv">
      <el-form label-width="100px" :model="form" :rules="rules" ref="form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="供应商名称" :label-width="formLabelWidth" prop="name">
              <my-select
                ref="mySelectBusiness"
                url="api/v5/supplier/getMarket"
                @selected="mySelectedSupplier"
                :queryName="this.form.name"
              ></my-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-radio v-model="form.sex" label="1">男</el-radio>
              <el-radio v-model="form.sex" label="2">女</el-radio>
              <!-- <el-input v-model="form.productName" autocomplete="off" style="width:70%"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码" :label-width="formLabelWidth">
              <el-input v-model="form.phone" autocomplete="off" style="width:70%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="负责人姓名" :label-width="formLabelWidth" prop="person_in_charge">
              <el-input v-model="form.person_in_charge" autocomplete="off" style="width:70%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号码" :label-width="formLabelWidth">
              <el-input v-model="form.id_number" autocomplete="off" style="width:70%"></el-input>
            </el-form-item>
          </el-col>
         <el-col :span="8">
            <el-form-item label="经营地址" :label-width="formLabelWidth" prop="address">
              <el-input v-model="form.address" autocomplete="off" style="width:70%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          
          <el-col :span="8">
            <el-form-item label="统一社会信用代码" :label-width="formLabelWidth" prop="person_in_charge">
              <el-input
                v-model="form.unified_social_credit_code"
                autocomplete="off"
                style="width:70%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="营业执照失效期" :label-width="formLabelWidth" prop="business_license_expiration_date">
              <el-date-picker v-model="form.business_license_expiration_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:70%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供货市场代码" :label-width="formLabelWidth" prop="supply_market_code">
              <el-input v-model="form.supply_market_code" autocomplete="off" style="width:70%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          
          
          <el-col :span="8">
            <el-form-item label="食品经营许可证号码" :label-width="formLabelWidth">
              <el-input
                v-model="form.food_business_license_number"
                autocomplete="off"
                style="width:70%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="食品经营许可证失效期" :label-width="formLabelWidth">
              <el-date-picker v-model="form.food_business_license_expiration_date" type="date" placeholder="选择日期" style="width:70%" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
         <el-col :span="8">
            <el-form-item label="营业执照照片" :label-width="formLabelWidth" prop="business_license_img">
              <!-- <el-input v-model="form.business_license_img" autocomplete="off" style="width:70%"></el-input> -->
              <ImgUpload @listenEvent="imgfn2" :queryImg="form.business_license_img" v-model="form.business_license_img"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
           
           <el-col :span="8">
            <el-form-item label="身份证正面照片" :label-width="formLabelWidth" prop="person_in_charge">
              <ImgUpload @listenEvent="imgfn" :queryImg="form.id_card_front_img" v-model="form.id_card_front_img"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证反面照片" :label-width="formLabelWidth" prop="person_in_charge">
              <!-- <el-input v-model="form.id_card_back_img" autocomplete="off" style="width:70%"></el-input> -->
              <ImgUpload @listenEvent="imgfn1" :queryImg="form.id_card_back_img" v-model="form.id_card_back_img"/>
            </el-form-item>
          </el-col>
          
          <el-col :span="8">
            <el-form-item label="食品经营许可证照片" :label-width="formLabelWidth">
              <!-- <el-input
                v-model="form.food_business_license_img"
                autocomplete="off"
                style="width:70%"
              ></el-input> -->
              <ImgUpload @listenEvent="imgfn3" :queryImg="form.food_business_license_img" v-model="form.food_business_license_img"/>
            </el-form-item>
          </el-col>
          
        </el-row>
        <div class="footer">
          <el-button @click="quxiao()">取 消</el-button>
          <el-button type="primary" @click="submitForm('form')" v-if="isshow==1">添 加</el-button>
          <el-button type="primary" @click="editForm('form')" v-if="isshow==2">编 辑</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import MySelect from "@/components/MySelect";
import ImgUpload from "@/components/imgUpload/imgupload";
export default {
  name: "addSupplier",
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请选择供应商名称", trigger: "change" }
        ],
        person_in_charge: [
          { required: true, message: "请输入社会信用代码", trigger: "change" }
        ],
        business_license_expiration_date: [
          { required: true, message: "请选择营业执照失效期", trigger: "change" }
        ],
        business_license_img: [
          { required: true, message: "请选择营业执照照片", trigger: "change" }
        ],
        address: [
          { required: true, message: "请输入经营地址", trigger: "change" }
        ],
        supply_market_code: [
          { required: true, message: "请输入供货市场代码", trigger: "change" }
        ],
      },
      formLabelWidth: "200px",
      isshow: 1,
      form: {
        businessId: 857,
        name: "",
        supply_market_code: "",
        sex: "1",
        phone: "",
        person_in_charge: "",
        id_number: "",
        id_card_front_img: "",
        id_card_back_img: "",
        unified_social_credit_code: "",
        business_license_expiration_date: "",
        business_license_img: "",
        address: "",
        food_business_license_number: "",
        food_business_license_expiration_date: "",
        food_business_license_img: "",
        supply_market_code: "",
      },
    };
  },
  components: {
    MySelect,
    ImgUpload
  },
  mounted() {
    this.form = this.$route.query.rowquery;
    console.log(this.form);
    this.isshow = this.$route.query.isshow;
  },
  methods: {
    submitForm(form) {
      console.log(this.form);
      this.form.businessId = 857;
      this.$store
        .dispatch("supplier/supplierAdd", this.form)
        .then((data) => {
          // console.log(data);
          // this.supplierTableData=data
          // console.log(this.total)
          // if ((this.total - 1) % this.perPage == 0) this.page--;
          // this.getproductMsg();
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.$router.push({
            path: "/select/index",
            // query:{businessId:1}
          });
        })
        .catch((err) => {
          // console.log(err);
          this.$message({
            type: "error",
            message: "添加失败!",
          });
        });
    },
    editForm(form) {
      this.$store
        .dispatch("supplier/supplierEdit", this.form)
        .then((data) => {
          // console.log(data);
          // this.supplierTableData=data
          // console.log(this.total)
          // if ((this.total - 1) % this.perPage == 0) this.page--;
          // this.getproductMsg();
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
          this.$router.push({
            path: "/select/index",
            // query:{businessId:1}
          });
        })
        .catch((err) => {
          // console.log(err);
          this.$message({
            type: "error",
            message: "编辑失败!",
          });
        });
    },
    quxiao() {
      this.$router.push({
        path: "/select/index",
        // query:{businessId:1}
      });
    },
    // 选择供应商
    mySelectedSupplier(obj) {
      this.form.supply_market_code = obj.value;
      this.form.name = obj.label;
    },
    imgfn(param) {
      this.form.id_card_front_img = param;
      // this.$refs.productImg.clearValidate();
    },
    imgfn1(param) {
      this.form.id_card_back_img= param;
      // this.$refs.productImg.clearValidate();
    },
    imgfn2(param) {
      this.form.business_license_img= param;
      // this.$refs.productImg.clearValidate();
    },
    imgfn3(param) {
      this.form.food_business_license_img= param;
      // this.$refs.productImg.clearValidate();
    }
  },
};
</script>

<style lang="scss" scoped>
.addSupplier {
  background: #f0f0f0;
  padding: 20px;
}
.title,
.formdiv {
  background: #fff;
  padding: 10px;
}
.title {
  margin-bottom: 15px;
  font-size: 18px;
}
.footer {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>